<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钩子函数</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="case11-demo3" v-runoob:hello.a.b="message">
</div>
<script type="text/javascript">
    Vue.directive("runoob",{
        bind:function (el,binding,vnode) {
            var s=JSON.stringify
            el.innerHTML=
                //binding中包含的几个属性
                //name 名称 value 值 expression 绑定值得表达式或变量 arg 参数 modifiers 修饰符对象
                "name:"+s(binding.name)+'<br>'+
                'value:'+s(binding.value)+'<br>'+
                'expression:'+s(binding.expression)+'<br>'+
                'argument:'+s(binding.arg)+'<br>'+
                'modifiers:'+s(binding.modifiers)+'<br>'+
                'vnode keys:'+Object.keys(vnode).join('，')
        }
    })
    new Vue({
        el:"#case11-demo3",
        data:{
            message:"Hello World"
        }
    })
</script>
</body>
</html>